<template>
    <view class="container">
        <image class="bg-image" src="/static/image.jpg" mode="aspectFill"></image>
        
        <view class="nav-bar">
            <view class="back-btn" @click="goBack">
                <image src="/static/return.png" mode="aspectFit" class="back-icon"/>
            </view>
            <text class="nav-title">{{ wordbookName }}</text>
        </view>
        
        <view class="sort-bar">
            <view 
                class="sort-btn" 
                :class="{ active: sortOrder === 'asc' }"
                @click="changeSort('asc')"
            >
                正序
            </view>
            <view 
                class="sort-btn" 
                :class="{ active: sortOrder === 'desc' }"
                @click="changeSort('desc')"
            >
                倒序
            </view>
        </view>

        <view class="content">
            <view class="word-list">
                <view class="word-item" v-for="word in sortedWords" :key="word.word_id">
                    <view class="word-header">
                        <text class="word-text">{{ word.word_name }}</text>
                    </view>
                    <view class="word-meaning">{{ word.word_paraphrase }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { top_word, bottom_word } from '@/api/user.js'

export default {
    data() {
        return {
            wordbookId: '',
            wordbookName: '',
            words: [],
            sortOrder: 'asc' // 默认正序
        }
    },
    computed: {
        sortedWords() {
            return this.sortOrder === 'asc' 
                ? [...this.words] 
                : [...this.words].reverse()
        }
    },
    onLoad(options) {
        this.wordbookId = options.wordbook_id
        this.wordbookName = options.wordbook_name
        this.loadWords()
    },
    methods: {
        async loadWords() {
            try {
                // 根据排序方式选择不同的接口
                const api = this.sortOrder === 'asc' ? top_word : bottom_word
                const res = await api(this.wordbookId)
                
                if (res.code === '2000') {
                    this.words = res.data
                } else {
                    uni.showToast({
                        title: res.message || '获取单词失败',
                        icon: 'none'
                    })
                }
            } catch (error) {
                console.error('获取单词失败：', error)
                uni.showToast({
                    title: '获取单词失败，请重试',
                    icon: 'none'
                })
            }
        },

        async changeSort(order) {
            this.sortOrder = order
            // 切换排序时重新加载数据
            await this.loadWords()
        },
        goBack() {
            uni.navigateBack()
        }
    }
}
</script>

<style>
.container {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.bg-image {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}

.nav-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 40px 20px 20px;
}

.sort-bar {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 10px 20px;
}

.sort-btn {
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 14px;
    color: #333;
}

.sort-btn.active {
    background: rgba(107, 75, 138, 0.9);
    color: white;
}

.content {
    position: relative;
    z-index: 2;
    padding: 20px;
    height: calc(100vh - 140px);
    overflow-y: auto;
}

.word-list {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px;
}

.word-item {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
}

.word-header {
    margin-bottom: 8px;
}

.word-text {
    font-size: 18px;
    color: #333;
    font-weight: 500;
}

.word-meaning {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

.nav-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    color: #333;
}

.back-icon {
    width: 24px;
    height: 24px;
}
</style> 